import {LitElement, html, css} from 'lit';
import {customElement, property} from 'lit/decorators.js';

@customElement('favorite-item')
export class FavoriteItem extends LitElement {
  // 定义组件的属性
  @property({type: String}) title: string;
  @property({type: String}) description: string;
  @property({type: String}) iconPath: string; // 图标路径
  @property({type: String}) href: string; // 跳转链接

  // 定义组件的样式
  static styles = css`
      :host {
          display: block;
          width: 270px;
          height: 100px;
      }

      .favorite-item {
          text-decoration: none; /* 去掉下划线 */
          color: black;
          width: 100%;
          height: 100%;
      }

      .content {
          border: 1px solid #e6e6e6;
          border-radius: 8px;
          width: 100%;
          height: 100%;
          display: flex;
          align-items: center;
          justify-content: space-between;
          transition: all 0.3s ease; /* 添加过渡效果 */
      }

      .content:hover {
          border: 1px solid #2969ff;
          color: #2969ff;
      }

      .title {
          width: 170px;
          font-weight: bold;
          margin: 0;
          white-space: nowrap; /* 禁止文本换行 */
          overflow: hidden; /* 隐藏超出部分 */
          text-overflow: ellipsis; /* 使用省略号表示被截断的文本 */
      }

      .description {
          width: 170px;
          color: #888;
          margin: 4px 0 0;
          white-space: nowrap; /* 禁止文本换行 */
          overflow: hidden; /* 隐藏超出部分 */
          text-overflow: ellipsis; /* 使用省略号表示被截断的文本 */
      }

      .icon {
          width: 56px;
          height: 56px;
          padding: 0 0 0 16px;
      }
  `;

  // 定义组件的渲染逻辑
  render() {
    return html`
      <a class="favorite-item" href="${this.href}" target="_blank">
        <div class="content">
          <img class="icon" src="https://favicon.im/${this.iconPath}" alt="icon"/>
          <div style="display: flex;flex-direction: column; padding-right: 8px">
            <span class="title">${this.title}</span>
            <span class="description">${this.description}</span>
          </div>
        </div>
      </a>
    `;
  }
}

// 确保组件在浏览器中注册
declare global {
  interface HTMLElementTagNameMap {
    'favorite-item': FavoriteItem;
  }
}